Tutorial 6: Using Controls

Good to see you again!

In this tutorial, we'll begin to learn how to use the Joy-Con controllers in our programs.

If we want to start writing something like a game, we're going to have to use the Joy-Con controllers sooner or later!

To do this, we'll need our good old if statements. After all, we are checking if a button is being pressed!

Here's how we do it. As always, we start super simple.

Enter the following code into the FUZE⁴ Nintendo Switch code editor:

  1. loop
  2.    clear(black)
  3.
  4.    joy = controls(0)
  5.
  6.    if joy.a then
  7.        print("You are pressing the A Button!")
  8.    endif
  9.
 10.    update()
 11. repeat

Here's a nice and simple program to get the idea across. All we want to happen is for the text "You are pressing the A Button!" to appear when we press the A button.

Notice that this program is all in a loop. We want our program to run continuously. The first thing we do in our loop is to clear the screen. We have a clear() and an update() function because we are changing what we want to appear on screen.

Now, onto the important part.

Take a look at line 4. Here we are calling a function called controls(). This function gives us the current state of all of the controls and this is exactly what we need to use the Joy-Con controllers in our program.

We store the result of the controls() function in a variable we've called joy.

Now that we've done this, we can access any of the buttons by using joy.a, joy.b, joy.x and so on.

On line 6 is our if statement which uses the controls data. We check if the A button is being pressed with if joy.a then.

A little more advanced...

It's important to realise that when a computer checks an if statement, it can only be either true or false.

When FUZE reads line 6, it checks to see if joy.a is true or false.

If the A button is being pressed, joy.a is true.

If the A button is not being pressed, joy.a is false.

When we write if joy.a then, there is a little something hidden. Really, line 6 reads: if joy.a == true then

Challenge

Can you add an if statement to this program to check another controller input? You should also write a line of text to display to the user that a button is being pressed.

Check out the user guide page for the controls() function to see all of the possible inputs for the Joy-Con controllers. You can find that page just here.

Moving a Ball Using the Control Stick

Remember our screen tutorial? In that project, we learned how to move a circle around the screen using variables.

What if we wanted to move the circle using the Joy-Con control sticks? It's actually beautifully simple.

We'll need the controls() function. First, let's remind ourselves of the basic program template.

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4.
  5. loop
  6.     clear()
  7.     circle( x, y, radius, 32, fuzepink, false )
  8.     update()
  9. repeat

We have a simple loop which puts a circle on screen at the x and y variables defined at the start of the program.

Let's add the controls() function, and define a variable to use it.

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4.
  5. loop
  6.     clear()
  7.     joy = controls( 0 )
  8.     circle( x, y, radius, 32, fuzepink, false )
  9.     update()
 10. repeat

Just like before, we have created a variable called joy to store the result of the controls() function.

The left control stick is accessed with .lx and .ly for the x and y axes of the control stick.

It's important to understand exactly how the controls() function works with the control stick. Take a look at the image below:

As you can see, the value returned by the controls() function which represents the left control stick is 0 when not being pushed in a direction.

When pushed to any side, the value changes towards either 1 or -1. There are a lot of numbers in between! Actually, on one axis there are 65000 different positions!

If the .lx value is greater than 0, we know the control stick is being pushed towards a positive number, and therefore this tells us the control stick is pushed to the right. If the value is less than 0, we know it is being pushed towards a negative number, and therefore is being pushed to the left.

Let's modify our code with this new knowledge so we can move in both directions on the x axis.

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4.
  5. loop
  6.     clear()
  7.     joy = controls( 0 )
  8.     x += joy.lx
  9.     circle( x, y, radius, 32, fuzepink, false )
 10.     update()
 11. repeat

Look at that! We've added just a single line of code.

On line 8, we simply add the value of the left control stick to the x variable. If the control stick is being pushed to the right, we have a positive number and so the circle moves to the right. If the control stick is being pushed to the left, we have a negative number and so the circle moves to the left.

Now, because these numbers are very small indeed, our circle will move incredibly slowly. Not very useful. Let's introduce a speed variable which we can use as a multiplier. Take a look below:

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4. speed = 8
  5.
  6. loop
  7.     clear()
  8.     joy = controls( 0 )
  9.     x += joy.lx * speed
 10.     circle( x, y, radius, 32, fuzepink, false )
 11.     update()
 12. repeat

With this change, we will see a much greater movement effect.

On line 9, we increase the x variable by the left control stick value multiplied by the speed variable. This gives us 8 times faster movement. Try changing the speed variable to see different results.

Okay, so let's move the circle on the y axis too! This one is just slightly more complicated.

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4. speed = 8
  5.
  6. loop
  7.     clear()
  8.     joy = controls( 0 )
  9.     x += joy.lx * speed
 10.     y -= joy.ly * speed
 10.     circle( x, y, radius, 32, fuzepink, false )
 11.     update()
 12. repeat

Line 10 is our new line. Notice that we use -= instead of += for the y axis. This is because the top of our screen is 0 on the y axis, but the control stick y axis is positive when being pushed upwards. Take a look at our control stick image again:

When we move the stick upwards, we receive a positive number. In order to make the circle move upwards on the screen, we need to decrease the y variable, not increase it. For this reason, we use -=.

Creating Boundaries

All we need now is a few if statements to stop our circle from moving off screen. Just like in the screen tutorial, we'll be checking the x and y variables, but instead of reversing direction, we will be redefining the x and y variables.

We'll start by stopping the circle at the edges of the x axis.

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4. speed = 8
  5.
  6. loop
  7.     clear()
  8.     joy = controls( 0 )
  9.     x += joy.lx * speed
 10.     y -= joy.ly * speed
 11.     if x + radius > gwidth() then
 12.         x = gwidth() - radius
 13.     endif
 14.     if x - radius < 0 then
 15.         x = radius
 16.     endif
 17.     circle( x, y, radius, 32, fuzepink, false )
 18.     update()
 19. repeat

Lines 11 to 16 contain our first set of if statements. All we need to do is check whether the edge of the circle (x + radius) has become greater than the edge of the screen (gwidth()). If it is, we redefine x to be equal to the edge of the screen minus the radius (x = gwidth() - radius).

We do the same thing but reversed for the left side of the screen. We check if x - radius has become less than 0, and if it has, we redefine x to be the left side (0) plus the radius of the circle. We can write this simply as x = radius.

Easy enough! Now let's do the same for the y axis:

  1. x = gwidth() / 2
  2. y = gheight() / 2
  3. radius = 100
  4. speed = 8
  5.
  6. loop
  7.     clear()
  8.     joy = controls( 0 )
  9.     x += joy.lx * speed
 10.     y -= joy.ly * speed
 11.     if x + radius > gwidth() then
 12.         x = gwidth() - radius
 13.     endif
 14.     if x - radius < 0 then
 15.         x = radius
 16.     endif
 17.     if y + radius > gheight() then
 18.         y = gheight() - radius
 19.     endif
 20.     if y - radius < 0 then
 21.         y = radius
 22.     endif
 23.     circle( x, y, radius, 32, fuzepink, false )
 24.     update()
 25. repeat

There we have it! This type of movement code can be applied to any program. In later tutorials we will be covering more advanced movement techniques, but just understanding this simple type of movement will open up a world of experimentation in your own projects!

See you in the next tutorial!

Functions and Keywords used in this tutorial

clear(), [controls()](../Command Reference/Input//help/view/controls), endIf, if, input(), loop, print(), repeat, then, update()